<template>
    <div>
        <!-- <h4>用户管理页面</h4> -->
        <el-button type="success" size="small" @click="addUI" style="margin-left: 213px;">添加</el-button>
        <template>
            <el-table :data="tableData" border style="width: 74.25%;margin: 0 auto;">
                <el-table-column fixed prop="userId" label="编号" width="80">
                </el-table-column>
                <el-table-column fixed prop="deptId" label="部门" width="80">
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="password" label="密码" width="120">
                </el-table-column>
                <el-table-column prop="photo" label="手机号" width="129">
                </el-table-column>
                
                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
                        <el-button @click="updateUI(scope.row)" type="warning" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>


        <!-- <div class="block" style="margin: 0 auto;text-align: center;">
            <span class="demonstration"></span>
            <el-pagination @size-change="" @current-change="" :current-page=""
                :page-sizes="" :page-size="" layout="total, sizes, prev, pager, next, jumper"
                :total="">
            </el-pagination>
        </div> -->



        <!-- Form -->
        <el-dialog title="用户" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form">
                <el-form-item label="部门：" :label-width="formLabelWidth">
                    <el-input v-model="form.deptId" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="用户名称：" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" :label-width="formLabelWidth">
                    <el-input v-model="form.photo" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<script>
import axios from 'axios'


export default {
    data() {
        return {
            formLabelWidth:"120px",
            dialogFormVisible:false,
            tableData:[],
            form:{}
        }
    },
    filters: {
   
    },
    methods: {
        userListLoad(){
            this.$axios.get("http://localhost:8080/user").then(resp => {
                this.tableData = resp.data.data
            })
        },
        addUI(){
            this.form={}
            this.dialogFormVisible=true
        },
        submit(){
            if (!this.form.userId) {
                this.$axios.post("http://localhost:8080/user/save", this.form).then(resp => {
                    let resultVo = resp.data;
                    if (resultVo.code == 200) {
                        this.dialogFormVisible = false
                        this.userListLoad();
                        this.form = {};
                        this.$message({
                            type: "success",
                            message: "添加用户成功"
                        })
                        return;
                    }
                    this.$message({
                            type: "error",
                            message: "添加用户失败"
                    })
                })
                return;
            }
            this.$axios.put("http://localhost:8080/user", this.form).then(resp => {
                    let resultVo = resp.data;
                    if (resultVo.code == 200) {
                        this.dialogFormVisible = false
                        this.userListLoad();
                        this.$message({
                            type: "success",
                            message: resp.data.msg
                        })
                        return;
                    }
                    this.$message({
                            type: "error",
                            message: resp.data.msg
                    })
                })
        },
        del(row) {
            if (window.confirm("确认删除吗？")) {
                this.$axios.delete(`http://localhost:8080/user/delete/${row.userId}`).then(resp => {
                    let resultVo = resp.data;
                    if (resultVo.code == 200) {
                        this.userListLoad();
                        this.$message({
                            type: "success",
                            message: "删除成功！"
                        })
                        return;
                    }
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    })
                })
            }

        },
        updateUI(row){
            let json = JSON.stringify(row);
            let user = JSON.parse(json);
            this.form = user;
            this.dialogFormVisible = true;
        }

    },
    mounted() {
        this.userListLoad();
    }

}



</script>